<template>
  <div>
    <div id="opacityBar" ref="opacityBar" style="height:325px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'OpacityBar',
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.opacityBar)
      var data = {
        value: [
          {
            name: '掉线',
            value: 26
          },
          {
            name: '故障',
            value: 156
          },
          {
            name: '正常',
            value: 196
          }
        ],
        total: 378
      }
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        color: ['#A0CE3A', '#31C5C0', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', 'rgba(250,250,250,0.3)'],
        title: {
          text: data.total,
          subtext: '设备总数',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 20
          },
          subtextStyle: {
            fontSize: 14,
            color: ['#ff9d19']
          },
          x: 'center',
          y: 'center'
        },
        series: [
          // 主要展示层的
          {
            radius: ['35%', '55%'],
            center: ['50%', '55%'],
            type: 'pie',
            label: {
              normal: {
                show: true,
                formatter (params) {
                  const scale = Math.round((params.value / data.total) * 100)
                  return params.name + '\n' + params.value + '(' + scale + '%)'
                },
                textStyle: {
                  fontSize: 14
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: data.value
          },
          // 边框的设置
          {
            radius: ['35%', '39%'],
            center: ['50%', '55%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: 'rgba(250,250,250,0.3)'
                }
              }
            ]
          },
          {
            name: '外边框',
            type: 'pie',
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            center: ['50%', '55%'],
            radius: ['60%', '60%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 9,
                name: '',
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: '#0b5263'
                  }
                }
              }
            ]
          }
        ]
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
